<template>
  <div class="section">
    <h2>人口统计分析</h2>
    <div class="chart-container">
      <div id="ageChart" class="chart"></div>
      <div id="genderChart" class="chart"></div>
      <div id="academicChart" class="chart"></div>
      <div id="countryChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      stats: {
        age: {
          男: {
            18: 9,
            19: 28,
            20: 19,
            21: 125,
            22: 134,
            23: 19,
            24: 18,
          },
          女: {
            18: 5,
            19: 135,
            20: 146,
            21: 31,
            22: 13,
            23: 15,
            24: 18,
          },
        },
        gender: {
          男: 352,
          女: 353,
        },
        academic: {
          男: {
            本科: 63,
            高中: 12,
            毕业: 277,
          },
          女: {
            本科: 290,
            高中: 15,
            毕业: 48,
          },
        },

        country: {
          印度: 53,
          美国: 40,
          加拿大: 34,
          瑞士: 27,
          西班牙: 27,
          爱尔兰: 27,
          丹麦: 27,
          日本: 21,
          斯里兰卡: 19,
          巴基斯坦: 19,
          澳大利亚: 14,
          韩国: 13,
        },
      },
    };
  },
  mounted() {
    const charts = {
      ageChart: echarts.init(document.getElementById("ageChart")),
      genderChart: echarts.init(document.getElementById("genderChart")),
      academicChart: echarts.init(document.getElementById("academicChart")),
      countryChart: echarts.init(document.getElementById("countryChart")),
    };
    //年龄分布条形图
    charts.ageChart.setOption({
      title: { text: "年龄分布" },
      tooltip: {},
      xAxis: {
        type: "category",
        data: Object.keys(this.stats.age).sort((a, b) => a - b),
        name: "年龄",
      },
      yAxis: { type: "value", name: "人数" },
      series: [
        {
          data: Object.keys(this.stats.age)
            .sort((a, b) => a - b)
            .map((key) => this.stats.age[key]),
          type: "bar",
          color: "#4a90e2",
        },
      ],
    });
    //性别分布
    charts.genderChart.setOption({
      title: { text: "性别分布" },
      tooltip: { trigger: "item" },
      legend: { orient: "vertical", left: "left", top: "30px" },
      series: [
        {
          type: "pie",
          radius: "60%",
          data: [
            { name: "男", value: this.stats.gender["男"] },
            { name: "女", value: this.stats.gender["女"] },
            {
              name: "总览",
              value: this.stats.gender["男"] + this.stats.gender["女"],
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    // 监听性别点击事件
    charts.genderChart.on("click", (params) => {
      const selectedGender = params.name; // 获取点击的性别
      this.updateChartsData(selectedGender, charts);//更新对应的图表
    });

    // 初始化数据展示
    this.updateChartsData("总览", charts);

    // 国家分布
    charts.countryChart.setOption({
      title: { text: "国家分布" },
      tooltip: {},
      xAxis: {
        type: "value",
        name: "人数",
      },
      yAxis: {
        type: "category",
        data: Object.keys(this.stats.country),
        axisLabel: { interval: 0 },
      },
      series: [
        {
          data: Object.values(this.stats.country),
          type: "bar",
          color: "#91cc75",
        },
      ],
      grid: {
        left: 60,
      },
    });
  },
  methods: {
    updateChartsData(gender, charts) {
      if (gender === "总览") {
        // 合并年龄数据
        const mergedAge = {};
        for (const age in this.stats.age["男"]) {
          mergedAge[age] =
            (this.stats.age["男"][age] || 0) + (this.stats.age["女"][age] || 0);
        }

        // 合并学历数据
        const mergedAcademic = {};
        for (const degree in this.stats.academic["男"]) {
          mergedAcademic[degree] =
            (this.stats.academic["男"][degree] || 0) +
            (this.stats.academic["女"][degree] || 0);
        }

        // 更新年龄图
        charts.ageChart.setOption({
          title: { text: `总览年龄分布` },
          tooltip: {},
          xAxis: {
            type: "category",
            data: Object.keys(mergedAge).sort((a, b) => a - b),
            name: "年龄",
          },
          yAxis: { type: "value", name: "人数" },
          series: [
            {
              data: Object.keys(mergedAge)
                .sort((a, b) => a - b)
                .map((k) => mergedAge[k]),
              type: "bar",
              color: "#4a90e2",
            },
          ],
        });

        // 更新学历图
        charts.academicChart.setOption({
          title: { text: `总览学历分布` },
          tooltip: { trigger: "item" },
          // textstyle:{
          //   fontSize: 18, 
          // },
          legend: { orient: "vertical", left: "left", top: "40px" },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              data: Object.entries(mergedAcademic).map(([name, value]) => ({
                name,
                value,
              })),
            },
          ],
        });
      } else {
        // 原来的性别分支保留
        charts.ageChart.setOption({
          title: { text: `${gender}年龄分布` },
          tooltip: {},
          xAxis: {
            type: "category",
            data: Object.keys(this.stats.age[gender]).sort((a, b) => a - b),
            name: "年龄",
          },
          yAxis: { type: "value", name: "人数" },
          series: [
            {
              data: Object.keys(this.stats.age[gender])
                .sort((a, b) => a - b)
                .map((key) => this.stats.age[gender][key]),
              type: "bar",
              color: "#4a90e2",
            },
          ],
        });

        charts.academicChart.setOption({
          title: { text: `${gender}学历分布` },
          tooltip: { trigger: "item" },
          legend: { orient: "vertical", left: "left", top: "40px" },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              data: Object.entries(this.stats.academic[gender]).map(
                ([name, value]) => ({
                  name,
                  value,
                })
              ),
            },
          ],
        });
      }
    },
  },
};
</script>

<style scoped>
.section {
  background: white;
  border-radius: 35px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left: 15px;
  margin-right: 15px;
}

.section h2 {
  color: #4a90e2;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}

.chart {
  height: 400px;
  border-radius: 10px;
  padding: 15px;
  background: white;
}
</style>
